<template>
  <div class="bigBox">
    <h3>商品热榜 <span>2022.10.01 ~ 2022.10.29</span></h3>
    <el-row v-for="(item,index) in hotList" :key="index" style="height:50px">
      <el-col v-show="index === 0" :span="4" class="ic icPic1">{{ index+1 }}</el-col>
      <el-col v-show="index===1" :span="4" class="ic icPic2">{{ index+1 }}</el-col>
      <el-col v-show="index===2" :span="4" class="ic icPic3">{{ index+1 }}</el-col>
      <el-col v-show="index>2" :span="4" class="ic icPic4">{{ index+1 }}</el-col>
      <el-col :span="16">{{ item.skuName }}</el-col>
      <el-col :span="4">{{ item.count }}单</el-col>
    </el-row>
  </div>
</template>

<script>
import moment from 'moment'
import { goodsTop } from '@/api'
export default {
  data() {
    return {
      hotList: []
    }
  },
  async created() {
    const { data } = await goodsTop(10, `2022-${new Date().getMonth() + 1}-01`, moment(new Date()).format('YYYY-MM-DD'))
    this.hotList = data
    console.log(data)
  }
}
</script>

<style lang="scss" scoped>
.bigBox {
  padding: 10px;
  margin: 20px 20px 20px 0;
  // margin-right: -20px;
  flex-direction: column;
  height: calc(60vh - 72px);
  min-height: 556px;
  background-color: #fff;
  border-radius: 20px;
  width: 700px;
}
.ic {
  margin-right: 25px;
  text-align: center;
  width: 21px;
  height: 20px;
  color: #8e5900;
}
.icPic1{
  background: url();
}
.icPic2{
  background: url();
}
.icPic3{
  background: url();
}
.icPic4{
  background: url();
}
</style>
